﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RiskBlockMap.aspx.cs" Inherits="SkWeb.RiskDB.RiskBlockMap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}
#allmap {margin-right: 160px;height: 100%;overflow: hidden;}
#result {border-left:1px dotted #999;height:100%;width:155px;position:absolute;top:0px;right:0px;font-size:12px;}
dl,dt,dd,ul,li{
    margin:0;
    padding:0;
    list-style:none;
}
p{font-size:12px;}
dt{
    font-size:14px;
    font-family:"微软雅黑";
    font-weight:bold;
    border-bottom:1px dotted #000;
    padding:5px 0 5px 5px;
    margin:5px 0;
}
dd{
    padding:5px 0 0 5px;
}
li{
    line-height:28px;
}
</style>

<link href="../easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
   
   
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        
       .file-box{ position:relative;width:340px} 
       .txt{ height:22px; border:1px solid #cdcdcd; width:180px;} 
       .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;} 
       .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px } 
        
  
        
    </style>

<script type="text/javascript" src="../js/json2.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C336a313e2012dcbe7d5994e09729dbd"></script>
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
 <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

  <script src="../easyui/jquery.easyui.min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form runat="server">
    </form>
   <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">	
    <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
    <div id="showPanelBtn" style="position:absolute;font-size:14px;top:50%;margin-top:-95px;right:0px;width:20px;padding:10px 10px;color:#999;cursor:pointer;text-align:center;height:170px;background:rgba(255,255,255,0.9);-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;font-family:'微软雅黑';font-weight:bold;">显示检索结果面板<br/>&lt;</div>
    <div id="panelWrap" style="width:0px;position:absolute;top:0px;right:0px;height:100%;overflow:auto;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
        <div style="width:20px;height:200px;margin:-100px 0 0 -10px;color:#999;position:absolute;opacity:0.5;top:50%;left:50%;" id="showOverlayInfo">此处用于展示覆盖物信息</div>
        <div id="panel" style="position:absolute;"></div>
    </div>
</div>

<div id="result">
    <dl>
    	<dt>绘制工具功能</dt>
        <dd>
            <ul>
                <li><label><input type="radio" name="openClose1" onclick="drawingManager.open()"/>打开</label>  <label><input type="radio" name="openClose1" onclick="drawingManager.close()" checked="checked"/>关闭</label></li>
            </ul>
        </dd>
    	<dt>选择危险级别</dt>
        <dd>
            <ul>
              <!--  <li><label><input type="radio" name="openClose" onclick="drawingManager.enableCalculate()"/>打开</label>  <label><input type="radio" name="openClose" onclick="drawingManager.disableCalculate()"  checked="checked"/>关闭</label></li>-->
			  <li>
                    <label><input type="radio" name="drawmode" onclick="setClass(1)" checked="checked"/>一级风险</label>
                </li>
                <li>
                    <label><input type="radio" name="drawmode" onclick="setClass(2)"/>二级风险</label>
                </li>
				 <li>
                    <label><input type="radio" name="drawmode" onclick="setClass(3)"/>三级风险</label>
                </li>
				
				
				
            </ul>
        </dd>
    	<dt>绘制功能</dt>
        <dd>
            <ul>
                <li>
                    <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_MARKER)" checked="checked"/>画点</label>
                    <input type="checkbox" id="isInfowindow"/> 是否带信息窗口
                </li>
                <li>
                    <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE)"/>画圆</label>
                </li>
                <li>
                    <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE)"/>画线</label>
                </li>
                <li>
                    <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON)"/>画多边形</label>
                </li>
                <li>
                    <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE)"/>画矩形</label>
                </li>
            </ul>
        </dd>
    	<dt>覆盖物操作</dt>
        <dd>
            <ul>
                <li>
                    <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
                    <input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
                    <input type="button" value="获取最后一个覆盖物信息" id="getLastOverLay"/>
					<input type="button" value="保存" onclick="savaPath()"/>
                </li>
            </ul>
        </dd>
    </dl>

</div>

<script type="text/javascript">
    function setCenterAndZoom(lng, lat, zoom) {
        var poi = new BMap.Point(lng, lat);
        map.centerAndZoom(poi, zoom);

    }

    function getParam(paramName) {
        paramValue = "";
        isFound = false;
        if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
            arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&");
            i = 0;
            while (i < arrSource.length && !isFound) {
                if (arrSource[i].indexOf("=") > 0) {
                    if (arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase()) {
                        paramValue = arrSource[i].split("=")[1];
                        isFound = true;
                    }
                }
                i++;
            }
        }
        return paramValue;
    }

    var showDrawTools = true;
    if (getParam("browse") == '1') {
        $("#allmap").css('margin-right', '0px');
        $("#allmap").css('width', '110%');
        $("#allmap").css('height', '110%');

        $("#result").css('display', 'none');
        showDrawTools = false;
    }
    // 百度地图API功能

    var selObj = null;//用户当前选中的风险区块多边形
    var selRank = "1"; //当前选中区块的危险级别
    var selId = null;
    var selDesc = "";
    var selMarker = null;
    var marker_data = null;
    var map = new BMap.Map("map", { mapType: BMAP_HYBRID_MAP }); 
    var poi = new BMap.Point(125.028, 46.561);
    map.centerAndZoom(poi, 14);
    map.enableScrollWheelZoom();

    //进入页面时从数据库加载所有图形，并展现
    $.ajax({
        url: "Handler.ashx?op=getall",
        type: "post",
        data: '',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // Play with returned data in JSON format
            DrawShapes(data);
        },
        error: function (msg) {
            alert('加载风险区块出错！');
        }
    });

    //加载所有井数据
    $.ajax({
        url: "Handler1.aspx",
        type: "post",
        data: '',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // Play with returned data in JSON format
            marker_data = data;
            DrawMarkers(data);

        },
        error: function (msg) {
            alert('加载风险区块出错！');
        }
    });


    document.getElementById("getLastOverLay").onclick = function () {
        if (overlays.length) {
            alert(overlays[overlays.length - 1][0]);
        } else {
            alert("没有覆盖物");
        }
    }

    var ShapesInfo = [];
    function DrawShapes(data) {
        for (var i = 0; i < data.length; i++) {

            if (data[i].TYPE == "polygon") {
                var points = null;
                points = eval('[' + data[i].DATA + ']');
                var BPoints = [];
                for (var j = 0; j < points.length; j += 2) {
                    BPoints.push(new BMap.Point(points[j], points[j+1]));
                }
                var color = "";
                if (data[i].RANK == 1) {
                    color = "red";
                } else if (data[i].RANK == 2) {
                    color = "orange"; //橙色
                } else if (data[i].RANK == 3) {
                    color = "yellow";//黄色
                }

                var polygon = new BMap.Polygon(BPoints,
                    { strokeColor: color, strokeWeight: 3, strokeOpacity: 1, fillColor: color, fillOpacity: 0.7 });
                ShapesInfo.push([polygon, data[i].ID,data[i].RANK,data[i].DES]);
                map.addOverlay(polygon);
                polygon.addEventListener('click', OnPolygonClick);

            }
        }
    
    }

    //把用户点击区块的信息保存到全局变量，并且展现在信息窗口里面
    var OnPolygonClick = function (event) {
        selObj = event.target;
        GetSelInfo(selObj);
        searchInfoWindow.open(event.point);
        $("#fx").val(selRank);
        $("#desc").val(selDesc);
    };

    //信息窗口的内容定义
    //var content = '';
    var rank = 1;
    var overlays = [];
    //回调获得覆盖物信息


    var overlaycomplete = function (e) {
        overlays.push([e.overlay, rank, e.drawingMode]);
       
        var result = "";
        result = "<p>";
        result += e.drawingMode + ":";
        if (e.drawingMode == BMAP_DRAWING_MARKER) {
            result += ' 坐标：' + e.overlay.getPosition().lng + ',' + e.overlay.getPosition().lat;
            if (document.getElementById('isInfowindow').checked) {
                searchInfoWindow.open(e.overlay);
            }
        }
        if (e.drawingMode == BMAP_DRAWING_CIRCLE) {
            result += ' 半径：' + e.overlay.getRadius();
            result += ' 中心点：' + e.overlay.getCenter().lng + "," + e.overlay.getCenter().lat;


        }
        if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) {
            result += ' 所画的点个数：' + e.overlay.getPath();
        }
        result += "</p>";
        document.getElementById("showOverlayInfo").style.display = "none";
        document.getElementById("panel").innerHTML += result; //将绘制的覆盖物信息结果输出到结果面板
    };


    var circlecomplete = function (cirObj) {
        cirObj.addEventListener("click", function (e) {
            searchInfoWindow.open(cirObj.getCenter());
            selObj = cirObj;
        });
    }

    var styleOptions = {
        strokeColor: "red",    //边线颜色。
        fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
        fillOpacity: 0.7,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }


    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: showDrawTools, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
            scale: 0.8, //工具栏缩放比例
            drawingTypes: [
            BMAP_DRAWING_MARKER,
            BMAP_DRAWING_POLYGON
         ]
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });

    var OnInfoSave = function () {
        var fx = $('#fx').val(); //风险级别
        var desc = $('#desc').val();
        ChangeStyle(selObj, fx);
        if (selId != null) {
            $.post('Handler.ashx?op=update', { id: selId, fx: fx, des: desc }, function (data, textStatus) {
                if (data == "修改成功！") {
                    // ChangeStyle(selObj, fx);
                    UpdateShapeInfo(selObj,selId,fx,desc);
                }
                alert(data);
            });
        }
        else {
            SavaObjInfo(selObj, fx, desc);
        }
        searchInfoWindow.close();
    };

    function UpdateShapeInfo(obj, id, fx, des) {
        for (var i = 0; i < ShapesInfo.length; i++) {
            if (obj.getPath() == ShapesInfo[i][0].getPath()) {
                ShapesInfo[i][2] = fx;
                 ShapesInfo[i][3] = des;
                break;
            }
        }
    }

    function ChangeStyle(obj, fx) {
        var color = "";
        if (fx == 1)
            color = "red";
        else if (fx == 2)
            color = "orange";
        else if (fx == 3)
            color = "yellow";

        obj.setStrokeColor(color);
        obj.setFillColor(color);
    }

    var OnInfoDelete = function () {
        map.removeOverlay(selObj);
        searchInfoWindow.close();
        selObj = null;
        selDesc = "";
        selRank = null;
        if (selId != null) {
            $.post('Handler.ashx?op=delete', { id: selId }, function (data, textStatus) {
                alert(data);
                selId = null;
            });
        }
        searchInfoWindow.close();
    };
    var OnInfoCancel = function () {
        searchInfoWindow.close();
        selObj = null;
        selId = null;
        selRank = null;
        selDesc = null;
    };

    var content = '<div style="margin:0;line-height:20px;padding:2px;font-size:15px">' +
                    '设置风险级别：<select id="fx"> <option value ="1">一级风险</option> <option value ="2">二级风险</option> <option value="3">三级风险</option></select> ' +
                    '<br/>风险区块信息：'+
                    '<textarea id="desc" rows="5" cols="23"></textarea>' +
                    '<br/>&nbsp&nbsp<input type="button" onclick="OnInfoSave()" value="保存" />&nbsp&nbsp<input type="button"  onclick="OnInfoCancel()" value="取消" />&nbsp&nbsp<input type="button" onclick="OnInfoDelete()" value="删除" /> ' +
                  '</div>';

    //创建检索信息窗口对象
    var searchInfoWindow = null;
    searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
        title: "风险区块",      //标题
        width: 180,             //宽度
        height: 205,              //高度
        enableAutoPan: false,      //自动平移
        enableSendToPhone: false, //是否启用发送到手机
        searchTypes: []
    });

    


    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    drawingManager.addEventListener('circlecomplete', circlecomplete);
    drawingManager.addEventListener('polygoncomplete', polygoncomplete);
    drawingManager.addEventListener('markercomplete', markercomplete);

   

    function polygoncomplete(Obj) {
        Obj.addEventListener("click", OnPolygonClick);
        ShapesInfo.push([Obj, null, rank, ""]);
        selObj = Obj;
        GetSelInfo(Obj);
        var points = Obj.getPath();
        searchInfoWindow.open(points[points.length-1]);
    }

    function GetSelInfo(Obj) {
        for (var i = 0; i < ShapesInfo.length; i++) {
            if (Obj.getPath() == ShapesInfo[i][0].getPath()) {
                selId = ShapesInfo[i][1];
                selRank = ShapesInfo[i][2].toString();
                if (ShapesInfo[i][3])
                    selDesc = ShapesInfo[i][3];
                else
                    selDesc = "";
                break;
            }
        }
    }

    function setClass(num) {
        rank = num;
        switch (num) {
            case 1:
                styleOptions = {
                    strokeColor: "red",    //边线颜色。
                    fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
                    strokeWeight: 3,       //边线的宽度，以像素为单位。
                    strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
                    fillOpacity: 0.7,      //填充的透明度，取值范围0 - 1。
                    strokeStyle: 'solid' //边线的样式，solid或dashed。
                }
                break;
            case 2:
                styleOptions = {
                    strokeColor: "orange",    //边线颜色。
                    fillColor: "orange",      //填充颜色。当参数为空时，圆形将没有填充效果。
                    strokeWeight: 3,       //边线的宽度，以像素为单位。
                    strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
                    fillOpacity: 0.7,      //填充的透明度，取值范围0 - 1。
                    strokeStyle: 'solid' //边线的样式，solid或dashed。
                }
                break;
            case 3:
                styleOptions = {
                    strokeColor: "yellow",    //边线颜色。
                    fillColor: "yellow",      //填充颜色。当参数为空时，圆形将没有填充效果。
                    strokeWeight: 3,       //边线的宽度，以像素为单位。
                    strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
                    fillOpacity: 0.7,      //填充的透明度，取值范围0 - 1。
                    strokeStyle: 'solid' //边线的样式，solid或dashed。
                }
                break;

        }
        drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: true, //是否开启绘制模式
            enableDrawingTool: showDrawTools, //是否显示工具栏
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                offset: new BMap.Size(5, 5), //偏离值
                scale: 0.8 //工具栏缩放比例
            },
            circleOptions: styleOptions, //圆的样式
            polylineOptions: styleOptions, //线的样式
            polygonOptions: styleOptions, //多边形的样式
            rectangleOptions: styleOptions //矩形的样式
        });
        //drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    }

//    function $(id) {
//        return document.getElementById(id);
//    }

    function clearAll() {
        for (var i = 0; i < overlays.length; i++) {
            map.removeOverlay(overlays[i][0]);
        }
        overlays.length = 0
    }

    var isPanelShow = false;
    //显示结果面板动作
    document.getElementById("showPanelBtn").onclick = showPanel;
    function showPanel() {
        if (isPanelShow == false) {
            isPanelShow = true;
            document.getElementById("showPanelBtn").style.right = "230px";
            document.getElementById("panelWrap").style.width = "230px";
            document.getElementById("map").style.marginRight = "230px";
            document.getElementById("showPanelBtn").innerHTML = "隐藏绘制结果信息<br/>>";
        } else {
            isPanelShow = false;
            document.getElementById("showPanelBtn").style.right = "0px";
            document.getElementById("panelWrap").style.width = "0px";
            document.getElementById("map").style.marginRight = "0px";
            document.getElementById("showPanelBtn").innerHTML = "显示绘制结果信息<br/><";
        }
    }

    //传送一个风险区域信息到数据库
    function SavaObjInfo(obj,fx,desc) {
        var arr = [];
        arr.push({ data: obj.getPath(), rank: fx, type: "polygon", desc: desc });
        var postedId = null;
        var str = JSON.stringify(arr);
        $.post("Handler.ashx?op=SaveRiskBlockInfo", { data: str },
        function (data, textStatus) {
            postedId = data;

            for (var i = 0; i < ShapesInfo.length; i++) {
                if (ShapesInfo[i][0] == obj) {
                    ShapesInfo[i][1] = postedId;
                    ShapesInfo[i][2] = fx;
                    ShapesInfo[i][3] = desc;
                    break;
                }
            }
        
         });

    }

    ///////////////////for marker ////////////////


    var content_marker = '<div style="margin:0;line-height:20px;padding:2px;font-size:15px">' +
                     '<div class="fitem">' +
              ' 井名: <input id="name" class="easyui-validatebox" required="true"/>' +
           ' </div>' +
           ' <div class="fitem">' +

                '经度: <input id="lng" class="easyui-validatebox easyui-numberbox" data-options="min:0,precision:4" required="true" disabled="true"/>' +
            '</div>' +
           ' <div class="fitem">' +
               ' 纬度:' +
               ' <input id="lat" class="easyui-validatebox easyui-numberbox" data-options="min:0,precision:4" required="true" disabled="true"/>' +
           ' </div>' +
            ' <div class="fitem">' +
               ' 位置:' +
               ' <input id="address" class="easyui-validatebox easyui-numberbox" data-options="min:0,precision:4" required="true"/>' +
           ' </div>' +
           ' <div class="fitem">' +
               '井别:' +
               ' <select id="jb" style=" width:55%">' +
                 ' <option value ="水平井">水平井</option>' +
                 ' <option value ="气井">气井</option>' +
                 ' <option value="超深井">超深井</option>' +
                 ' <option value="探井">探井</option>' +
                 ' <option value ="大斜度井">大斜度井</option>' +
                  '<option value ="评价井">评价井</option>' +
                 ' <option value="深井">深井</option>' +
                 ' <option value="常规油、水井">常规油、水井</option>' +
               ' </select>' +
           ' </div>' +

            ' <div class="fitem">' +
               '工艺:' +
               ' <select id="gy"  style=" width:55F%">' +
                 ' <option value ="水力喷射">水力喷射</option>' +
                  '<option value ="管输射孔下泵联作">管输射孔下泵联作</option>' +
                  '<option value="电缆射孔井">电缆射孔井</option>' +
               ' </select>' +
            '</div>' +
            '<div>' +
            '&nbsp&nbsp<input type="button" onclick="OnMarkerSave()" value="保存" />&nbsp&nbsp<input type="button"  onclick="OnMarkerCancel()" value="取消" />&nbsp&nbsp<input type="button" onclick="OnMarkerDelete()" value="删除" /> ' +
            '</div>'
    '</div>';

    var InfoWindow_marker = null;
    InfoWindow_marker = new BMapLib.SearchInfoWindow(map, content_marker, {
        title: "添加井信息",      //标题
        width: 210,             //宽度
        height: 225,              //高度
        enableAutoPan: false,      //自动平移
        enableSendToPhone: false, //是否启用发送到手机
        searchTypes: []

    });
    var label = null;
    function markercomplete(Obj) {
        var marker = new BMap.Marker(Obj.getPosition());  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.removeOverlay(Obj);
        selMarker = marker;
        tmp_obj = { ADDRESS: "", DES: "", GY: "", ID: "", JB: "", LAT: Obj.getPosition().lat, LNG: Obj.getPosition().lng, NAME: "", RANK: "" };
        marker_data.rows.push(tmp_obj);
        //marker_data.rows.push([null, Obj.getPosition().lng, Obj.getPosition().lat,"","",""]);
        marker.addEventListener("mouseover", function (e) {

            var opts = {
                position: e.point,    // 指定文本标注所在的地理位置
                offset: new BMap.Size(5, -20)    //设置文本偏移量
            }

            var index = getMarkerData(e.target.getPosition().lng, e.target.getPosition().lat);
            well_name = "";
            if (index!=null)
                 well_name= marker_data.rows[index].NAME;

            label = new BMap.Label(well_name, opts);  // 创建文本标注对象
            label.setStyle({
                color: "red",
                fontSize: "12px",
                height: "20px",
                lineHeight: "20px",
                fontFamily: "微软雅黑"
            });
            map.addOverlay(label);

        });

        marker.addEventListener("mouseout", function (e) {

            map.removeOverlay(label);

        });

        marker.addEventListener("click", function (e) {
            selMarker = e.target;
            InfoWindow_marker.open(e.target.getPosition());

            var lng = e.target.getPosition().lng; //$("#lng").val();
            var lat = e.target.getPosition().lat; //$("#lat").val();
            $("#lng").val(lng);
            $("#lat").val(lat);
            var id = null;
            for (var i = 0; i < marker_data.rows.length; i++) {
                if (marker_data.rows[i].LNG == lng && marker_data.rows[i].LAT == lat) {
                    //id = marker_data.rows[i].ID;
                    $("#name").val(marker_data.rows[i].NAME);
                    $("#lng").val(marker_data.rows[i].LNG);
                    $("#lat").val(marker_data.rows[i].LAT);
                    $("#address").val(marker_data.rows[i].ADDRESS);
                    $("#jb").val(marker_data.rows[i].JB);
                    $("#gy").val(marker_data.rows[i].GY);
                }
            }

        });
    }


    function DrawMarkers(data) {
        for (var i = 0; i < data.rows.length; i++) {
            var marker = new BMap.Marker(new BMap.Point(data.rows[i].LNG, data.rows[i].LAT));  // 创建标注
            map.addOverlay(marker);

            var label = null;
            marker.addEventListener("mouseover", function (e) {

                var opts = {
                    position: e.point,    // 指定文本标注所在的地理位置
                    offset: new BMap.Size(5, -20)    //设置文本偏移量
                }

                var index = getMarkerData(e.target.getPosition().lng, e.target.getPosition().lat);
                well_name = "";
                if (index!=null)
                    well_name = marker_data.rows[index].NAME;

                label = new BMap.Label(well_name, opts);  // 创建文本标注对象
                label.setStyle({
                    color: "red",
                    fontSize: "12px",
                    height: "20px",
                    lineHeight: "20px",
                    fontFamily: "微软雅黑"
                });
                map.addOverlay(label);

            });
            marker.addEventListener("mouseout", function (e) {

                map.removeOverlay(label);

            });

            marker.addEventListener("click", function (e) {
                InfoWindow_marker.open(e.target.getPosition());

                var lng = e.target.getPosition().lng; //$("#lng").val();
                var lat = e.target.getPosition().lat; //$("#lat").val();
                var id = null;
                for (var i = 0; i < marker_data.rows.length; i++) {
                    if (marker_data.rows[i].LNG == lng && marker_data.rows[i].LAT == lat) {
                        //id = marker_data.rows[i].ID;
                        $("#name").val(marker_data.rows[i].NAME);
                        $("#lng").val(marker_data.rows[i].LNG);
                        $("#lat").val(marker_data.rows[i].LAT);
                        $("#address").val(marker_data.rows[i].ADDRESS);
                        $("#jb").val(marker_data.rows[i].JB);
                        $("#gy").val(marker_data.rows[i].GY);
                    }
                }

            });
                      // 将标注添加到地图中
        }
    }

    //删除井信息
    function OnMarkerDelete() {
        // var row = $('#tt').datagrid('getSelected');
        var lng = $("#lng").val();
        var lat = $("#lat").val();
        var id = null;
        var index = getMarkerData(lng, lat);
        if (index!=null)
            id = marker_data.rows[index].ID; 

        if (id) {
            $.messager.confirm('Confirm', '确定要删除当前记录吗?', function (r) {
                if (r) {
                    $.post('FormAction.aspx?Action=delete&id=' + id, { id: id }, function (result) {
                        if (result.success) {
                            $('#tt').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    }, 'json');
                }
            });
        }
        map.removeOverlay(selMarker);

    }

    //有更新和添加新数据两种情况
    function OnMarkerSave() {

        var name = $("#name").val();
        var lng = $("#lng").val();
        var lat = $("#lat").val();
        var address = $("#address").val();
        var jb = $("#jb").val();
        var gy = $("#gy").val();

        var id = null;
        var index = getMarkerData(lng, lat);
        var markerData = marker_data.rows[index];
        if (markerData)
            id = markerData.ID;
         if (id) {
             var url_tmp = "FormAction.aspx?action=update&id=" + id;
             $.post(url_tmp, { name: name, lng: lng, lat: lat, address: address, jb: jb, gy: gy }, function (e) {
                 markerData.NAME = name;
                 markerData.ADDRESS = address;
                 markerData.JB = jb;
                 markerData.GY = gy;
             });
         }
         else {
             var url_tmp = "FormAction.aspx?action=add";
             $.post(url_tmp, { name: name, lng: lng, lat: lat, address: address, jb: jb, gy: gy }, function (data) {
                 //var data = getMarkerData(lng, lat);
                 markerData.NAME = name;
                 markerData.ID = data;
                 markerData.ADDRESS = address;
                 markerData.JB = jb;
                 markerData.GY = gy;
             });
         }
        
    }
    function getMarkerData(lng, lat) {
        for (var i = 0; i < marker_data.rows.length; i++) {
            if (marker_data.rows[i].LNG == lng && marker_data.rows[i].LAT == lat) {
                return i;
            }
        }
    }   
    /////////////////////end for marker////////////////////////////
	
</script>

   
</body>
</html>
